<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000
	
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '5rem'
			},
			randoms: {
				type: Number,
				default: 20
			},
			height: {
				type: String,
				default: '5rem'
			}
		},
		data() {
			return {
				random:0,
				chart: null,
			}
		},
		created() {
			this.random = this.randoms;
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				// setInterval(function () {
				//   that.random = +(Math.random() * 60).toFixed(2);
				//   that.initChart();
				// }, 2000);
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			setnum(datas) {
				// console.log("z....>>>>>>>>>>>>>>>", datas);
				let that = this;
				that.random = datas==null?0:datas;
				that.$nextTick(() => {
					that.initChart();
				})
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')
				var getvalue = [that.random];
				let colors = '#ff0000';
				if (getvalue > 80) {
					colors = '#04cc04';
				} else if (getvalue > 50) {
					colors = '#ffe623';
				} else {
					colors = '#ff0000';
				}
				var option = {
					title: {
						text: getvalue + '%',
						textStyle: {
							color: colors,
							fontSize: 15
						},
						subtext: 'SOC',
						subtextStyle: {
							color: '#666666',
							fontSize: 12
						},
						itemGap: 2,
						left: 'center',
						top: '30%'
					},
					// tooltip: {
					// 	formatter: function(params) {
					// 		return '<span style="color: #fff;">SOC：' + getvalue + '%</span>';
					// 	}
					// },
					angleAxis: {
						max: 100,
						clockwise: true, // 逆时针
						// 隐藏刻度线
						show: false
					},
					radiusAxis: {
						type: 'category',
						show: true,
						axisLabel: {
							show: false,
						},
						axisLine: {
							show: false,

						},
						axisTick: {
							show: false
						},
					},
					polar: {
						center: ['50%', '50%'],
						radius: '160%' //图形大小
					},
					series: [{
						type: 'bar',
						data: getvalue,
						showBackground: true,
						backgroundStyle: {
							color: '#BDEBFF',
						},
						coordinateSystem: 'polar',
						roundCap: true,
						barWidth: 4,
						itemStyle: {
							normal: {
								opacity: 1,
								color:colors,
								// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								// 	offset: 0,
								// 	color: '#afff45'
								// }, {
								// 	offset: 0.1,
								// 	color: colors
								// }]),
								shadowBlur: 6,
								shadowColor: colors,
							}
						},
					}]
				};

				this.chart.setOption(option)
			}
		}
	}
</script>
